<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<scroll-view class="scroll-view_H" scroll-y="true" style="max-height: 1000rpx;">
			<view class="banner-title">
				<!-- banner -->
				<view class="banner">
					<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true"
						interval="5000" duration="500">
						<swiper-item v-for="(item, index) in banner" :key="index">
							<image :src="item" mode="aspectFill"></image>
						
						</swiper-item>
					</swiper>
				</view>
				<!-- 价格 -->
				<view class="price-info">
					<view class="price" style="align-items: baseline;"
						v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">
						<text class="min">￥</text>
						<text class="max">
							{{dataInfo.price_selling}}
							<text style="color: #f20;" v-if="dataInfo.balance2!=0">+{{dataInfo.balance2}}<text
									style="font-size: 24rpx;">礼品卡</text></text>
						</text>
						<view class="" style="margin-left: 10rpx;color: #999;text-decoration: line-through;">
							{{dataInfo.price_market}}</view>
					</view>
					<view class="price" v-if="dataInfo.goods_type==3">
						<text class="max">{{dataInfo.price_selling}}</text><text
							style="color: #f20;margin-left: 10rpx;font-weight: 700;">礼品卡</text>
					</view>
					<view class="price" v-if="dataInfo.goods_type==4">
						<text class="max">{{dataInfo.price_selling}}</text><text
							style="color: #f20;margin-left: 10rpx;font-weight: 700;">红包券</text>
					</view>
					
				</view>
				<!-- 限时抢购 -->

				<!-- 标题 -->
				<view class="goods-title">
					<text>{{dataInfo.name}}</text>
				</view>
				<view class="miaoshu" style="padding-left: 30rpx;color: #999;">
					{{dataInfo.remark}}
				</view>
				<!-- 开通会员 -->
			</view>

			<!-- 商品介绍 -->
			<view class="products-introduction" ref="products">
				<view class="title">
					<text>商品介绍</text>
				</view>

				<view class="content">
					<jyf-parser :html="dataInfo.content" ref="article"></jyf-parser>
				</view>
			</view>
			<!-- 底部 -->
			<view class="page-footer">
				<view class="footer-fn" v-if="dataInfo.goods_type!=3">
					<view class="list" @click="onTohome">
						<tui-icon name="shop" :size="22" color="#333"></tui-icon>
						<text>首页</text>
					</view>
					<view class="list" @click="onToCart">
						<text class="iconfont icon-cart"></text>
						<text>购物车</text>
					</view>
				</view>
				<view class="footer-buy" v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">
					<view class="buy-at" style="width: 100%;" @click="getShow(3)">
						<text>立即购买</text>
					</view>
				</view>
				<view class="footer-buy" v-if="dataInfo.goods_type==3||dataInfo.goods_type==4"
					style="width: 100%;margin-left: 4%;">
					<!--				<view class="buy-at" style="width: 100%;"  @click="getShow(3)">-->
					<view class="buy-at" style="width: 100%;" @click="getShow(3, dataInfo)">
						<text>兑换</text>
					</view>
				</view>
			</view>
			<view class="cu-modal bottom-modal" :class="{'show':isShow}" @click="hide">
				<view class="cu-dialog">
					<view class="goods-data">
						<view class="thumb">
							<image :src="data_xuan.goods_image||dataInfo.cover" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text></text>
							</view>
							<view class="price" style="align-items: flex-end;" v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">
								<text class="min">￥</text>
								<text class="max">{{data_xuan.price_selling||dataInfo.price_selling}}<text style="color: #f20;" v-if="dataInfo.balance2!=0">+{{dataInfo.balance2}}<text style="font-size: 24rpx;">礼品卡</text></text></text>
								<view class="" style="margin-left: 10rpx;color: #999;text-decoration: line-through;">{{data_xuan.price_market||dataInfo.price_market}}</view>
							</view>
							<view class="price" v-if="dataInfo.goods_type==3">
								<text class="max">{{data_xuan.price_selling||dataInfo.price_selling}}</text><text style="color: #f20;margin-left: 10rpx;font-weight: 700;">礼品卡</text>
							</view>
							<view class="price" v-if="dataInfo.goods_type==4">
								<text class="max" v-if="data_xuan.price_selling!=0">{{data_xuan.price_selling||dataInfo.price_selling}}+</text><text class="max">{{data_xuan.balance3||dataInfo.balance3}}</text><text style="color: #f20;margin-left: 10rpx;font-weight: 700;">红包券</text>
							</view>
							<!-- <view class="inventory">
								<text v-if="data_xuan">库存：{{data_xuan.stock_total - data_xuan.stock_sales}}</text>
								<text v-else>库存：{{dataInfo.stock_total - dataInfo.stock_sales}}</text>
								<text style="margin-left: 20rpx;">销量：{{data_xuan.stock_sales||dataInfo.stock_sales}}</text>
							</view> -->
						</view>
					</view>
					<view class="attr-size">
						<view class="attr-list" style="padding-top: 30rpx;">
							
							<view class="attr-list" v-for="(item,index) in dataInfo.specs" :key="index">
								<view class="title">
									<text>{{item.name}}</text>
								</view>
								<view class="size-list">
									<div style="margin-bottom: 20rpx;" class="list" v-for="(ite,ins) in item.list" :key='ins'  v-bind:class="[ite.isShow?'':'noneActive',subIndex[index] == ins?'action':'']"  @click.stop="tabs_index(ite.name,index,ins)">
										<text>{{ite.name}}</text>
									</div>
								</view>
								
							</view>
						</view>
						<view class="attr-number" @click.stop="onStop">
							<view class="tit">数量</view>
							<view class="number">
								<tui-numberbox :min="1" :value="value" @change="change"></tui-numberbox>
							</view>
						</view>
					</view>
					<view class="attr-btn">
						<view class="add-cart" v-if="BuyType === 1" @click="addCat()">加入购物车</view>
						<view class="add-buy" v-if="BuyType === 1" @click="submit()">
							{{dataInfo.goods_type==3||dataInfo.goods_type==4?'兑换':'立即购买'}}</view>
						<view class="confirm" v-if="BuyType === 2 || BuyType === 3" @click="onConfirm(BuyType)">
							{{dataInfo.goods_type==3||dataInfo.goods_type==4?'兑换':'确定'}}</view>
					</view>
				</view>
			</view>
			</scroll-view>
			<tui-modal :show="couponModal" @cancel="couponModal = false" :custom="true" padding="40rpx 30rpx">
				<view class="tui-modal-custom">
					<view class="tui-modal-custom-text" style="margin-bottom: 30rpx;">
						<view style="font-weight: bold;margin-bottom: 30rpx;font-size: 30rpx;">所需优惠券数量</view>
						<view class="radio flex flex-align flex-bt" style="margin-bottom: 20rpx;"
							v-for="(item,index) in dataInfo.coupon_list" :key="index">
							<text>{{item.name}} 现有 ( {{item.count}} ) 张</text>
							<view style="font-size: 32rpx;font-weight: bold;"
								:style="item.count>=item.number?'color:#1ad41a':'color:#f20'">
								{{item.count>=item.number?'√':'×'}}</view>
						</view>
					</view>
					<view class="flex flex-align">
						<tui-button height="72rpx" :size="28" type="white" @click="couponModal = false">取消</tui-button>
						<view class="" style="width: 20rpx;"></view>
						<tui-button height="72rpx" :size="28" type="danger" @click="couponModalConfirm">确定</tui-button>
					</view>
				</view>
			</tui-modal>
		</tui-bottom-popup>
		<view class="flex flex-align flex-center zhezhao" v-if="isloading">
			<loading></loading>
		</view>
	</view>
</template>

<script>
	import webUni from "@/common/uni.webview.js"
	import loading from "@/components/loading/loading.vue"
	export default {
		components: {
			loading
		},
		name: 'tOrderDetail',
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			id: {
				type: String,
				default:''
			},
		},
		data() {
			return {
				index: 3,
				banner:'',
				data_xuan:'',
				couponModal:false,
				value:1,
				isShow:false,
				work_union:'',
				datas:'',
				dataInfo:'',
				BuyType:'',
				isloading:false,
				shopItemInfo:{},
				selectArr: [], 
				showAttr: "",
				subIndex: [],
			};
		},
		created() {
			let that = this
			uni.$off('isbtn');
			uni.$on('isbtn', function(data) {
				that.isloading = !data
			});
		},
		methods: {
			close() {
				this.$emit("close", {})
				this.dataInfo = ''
			},
			hide(){
				this.isShow = false;
			},
			onStop(){},
			btnPay() {
				this.close();
				this.$emit("finish", this.index)
			},
			tabs(e) {
				this.index = e
			},
			onToCart() {
				webUni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			onTohome(){
				webUni.switchTab({
					url: '/pages/home/home'
				})
			},
			change: function(e) {
				this.value = e.value;
			},
			go_url(e){
				this.tui.href(e)
			},
			getShow(e, info){
				let that = this
				that.BuyType = e
				if (info?.entrance_id ==  4   &&  info.coupon_list.length != 0) {
					that.couponModal = true
				} else {
					that.isShow = true
				}
			},
			getdata(e){
				let that = this
				that.selectArr = []
				that.subIndex = []
				that.data_xuan = ''
				that.isShow = false
				that.tui.request("api.data/getGoods", "POST", {code:e}, false, false, true).then((res) => {
					if(res.code==1){
						that.dataInfo = res.data
						that.banner =res.data.slider
						that.work_union = res.data.work_union
						that.datas = res.data.items
						for (var i in that.datas) {
							that.shopItemInfo[that.datas[i].filtered_spec] = that.datas[i]; 
						}
						if(res.data.spec_type==1){
							that.data_xuan = res.data
						}else{
							that.getGuige()
						}
					}
				}).catch((res) => {
			
				})
			},
			tabs_index(item, n, index){
				
				var self = this;
				
				if (self.selectArr[n] != item) {
					self.selectArr[n] = item;
					self.subIndex[n] = index;
				
				} else {
					self.selectArr[n] = undefined;
					self.subIndex[n] = -1; //去掉选中的颜色
					self.data_xuan = ''
				}
				
				var showarr = self.selectArr;
				var tempTop = [];
				showarr.forEach((item, i, arr) => {
					if (item) {
						tempTop.push(item)
					}
				})
				 
				self.showAttr = tempTop.join(";");
				self.getGuige();
				tempTop = []
			},
			getGuige(e){
				var self = this;
				var option = self.dataInfo.specs;
				var result = []; //定义数组存储被选中的值
				option.map((item,index)=>{
					result[index] = self.selectArr[index] ? self.selectArr[index] : '';
				})
				if (self.shopItemInfo[result.join(";")]) {
					self.data_xuan = self.shopItemInfo[result.join(";")]
				}
				for (var i in option) {
					var last = result[i]; //把选中的值存放到字符串last去
					for (var k in option[i].list) {
						result[i] = option[i].list[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
						option[i].list[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
					}
					result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
				}
				self.$forceUpdate(); //重绘
			},
			isMay: function(result) {
				for (var i in result) {
					if (result[i] == '') {
						return true; //如果数组里有为空的值，那直接返回true
					}
				}
				if (this.shopItemInfo[result.join(";")]) { //匹配选中的数据的库存，若不为空返回true反之返回false
					return (this.shopItemInfo[result.join(";")].stock_total- this.shopItemInfo[result.join(";")].stock_sales)==0 ? false : true;
				}
			},
			onConfirm(e){
				if(e==2){
					this.addCat()
				}else if(e==3){
					this.submit()
				}
			},
			async submit() {
				let that = this
				if(!that.data_xuan){
					that.tui.toast('商品规格不能为空')
					return
				}
				if(that.data_xuan.stock_total- that.data_xuan.stock_sales<=0||that.value>(that.data_xuan.stock_total- that.data_xuan.stock_sales)){
					that.tui.toast('库存不足')
					return
				}
				that.isShow = false;
				that.isloading = true
				let data = that.dataInfo.code+'@'+that.value
				let datas= {
				  "buy_now_goods_req": {
					"buy_num": that.value,
					"goods_id":that.dataInfo.id,
					"sku_id": that.dataInfo.spec_type==1?0:that.data_xuan.id
				  },
				  "work_union": "string"
				}
				if (that.dataInfo.entrance_id ==  4   &&   that.dataInfo.coupon_list.length!=0) {
					if(!that.dataInfo.coupon_id){
						that.isloading = false
						that.tui.toast('所需兑换券不足')
						return
					} else {
						that.tui.request("api.auth.order/exchangeShop", "POST", {coupon_id:that.dataInfo.coupon_id}, false, false, true).then((res) => {
							that.tui.toast(res.info)
							if(res.code==1){
								that.$emit("finish", {"type":1})
								// webUni.navigateTo({
								// 	url: '/pages/MyOrderList/MyOrderList'
								// })
								// that.page=1
								// that.goodsList = []
								// that.getList()
							}
						}).catch((res) => {
				
						})
					}
				} else {
					that.tui.addrequest("order/create", "POST", datas, false, false, true).then((res) => {
						if(res.code==0){
							that.isloading = false
							that.order_no = res.data.order_no
							that.$emit("finish", {'order_no':res.data.order_no,"type":1})
							// webUni.navigateTo({
							// 	url: '/pages/ConfirmOrder/ConfirmOrder?order_no='+that.order_no
							// })
						}else{
							that.tui.toast(res.message)
						}
						
					}).catch((res) => {
							that.submit1()
						})
					}
				},
			async submit1 () {
				let that = this
				if(that.data_xuan.stock_total- that.data_xuan.stock_sales<=0||that.value>(that.data_xuan.stock_total- that.data_xuan.stock_sales)){
					that.tui.toast('库存不足')
					return
				}
				that.isloading = true
				
				that.isShow = false;
				let data = that.dataInfo.code+'@'+that.value
				if (that.dataInfo.entrance_id ==  4   &&   that.dataInfo.coupon_list.length!=0) {
					if(!that.dataInfo.coupon_id){
						that.isloading = false
						that.tui.toast('所需兑换券不足')
						return
					} else {
						that.tui.request("api.auth.order/exchangeShop", "POST", {coupon_id:that.dataInfo.coupon_id}, false, false, true).then((res) => {
							that.tui.toast(res.info)
							if(res.code==1){
								that.$emit("finish", {"type":1})
								// webUni.navigateTo({
								// 	url: '/pages/MyOrderList/MyOrderList'
								// })
								
							}
						}).catch((res) => {
			
						})
					}
				} else {
					that.tui.request("api.auth.order/add", "POST", {items:data,work_union:that.work_union,goods_sku:that.data_xuan.id,type:that.types}, false, false, true).then((res) => {
						if(res.code==1){
							that.order_no = res.data.order_no
							that.$emit("finish", {'order_no':res.data.order_no,"type":1})
							// webUni.navigateTo({
							// 	url: '/pages/ConfirmOrder/ConfirmOrder?order_no='+that.order_no
							// })
							
						}else{
							that.tui.toast(res.info)
						}
					}).catch((res) => {
			
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	/* banner 标题 */
	.banner-title {
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
	}
	.zhezhao{background: rgba(0, 0, 0, .3);
		position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 11111;
	}
	/* banner */
	.banner {
		width: 100%;
		height: 750rpx;

		.screen-swiper {
			width: 100%;
			height: 100%;
		}
	}

	/* 价格 */
	.price-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 4%;
		height: 120rpx;

		.price {
			display: flex;
			align-items: center;

			.min {
				color: $base;
				font-size: 28rpx;
				font-weight: bold;
			}

			.max {
				color: $base;
				font-size: 48rpx;
				font-weight: bold;
			}
		}

		.info {
			display: flex;
			align-items: center;
			height: 100%;

			.list {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 0 20rpx;

				text {
					font-size: 24rpx;
					color: #555555;
				}

				.iconfont {
					font-size: 34rpx;
					margin-bottom: 10rpx;
					color: #555555;
				}

				.action {
					color: $base;
				}
			}
		}
	}

	/* 限时抢购 */
	.flash-price {
		display: flex;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		// border-radius: 20rpx;
		overflow: hidden;

		.price-item {
			position: relative;
			display: flex;
			width: 70%;
			height: 100%;
			background: linear-gradient(to left, $base, $assist-clor);
			padding: 0 20rpx;
			overflow: hidden;

			.icon-item {
				display: flex;
				align-items: center;
				height: 100%;

				text {
					font-size: 42rpx;
					color: #FFFFFF;
				}
			}

			.price {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 20rpx;

				.current-price {
					display: flex;
					align-items: center;

					// height: 60rpx;
					text {
						color: #FFFFFF;
						font-weight: bold;
					}

					.min {
						font-size: 28rpx;
					}

					.max {
						font-size: 38rpx;
					}
				}

				.original-price {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						color: #FFFFFF;
						opacity: 0.7;
						text-decoration: line-through;
					}
				}
			}

			.tag {
				position: absolute;
				right: -20rpx;
				bottom: -20rpx;
				transform: rotate(-45deg);

				text {
					font-size: 68rpx;
					color: rgba(0, 0, 0, 0.2);
				}
			}
		}

		.time-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 30%;
			height: 100%;
			background-color: $rgba-05;

			// opacity: 0.5;
			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;

				text {
					color: #FFFFFF;
					font-size: 24rpx;
				}
			}

			.time {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 50rpx;

				.num {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40rpx;
					height: 40rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					background-color: $base;
					border-radius: 10rpx;
				}

				.dot {
					font-size: 24rpx;
					color: $base;
					margin: 0 5rpx;
				}
			}
		}
	}

	/* 标题 */
	.goods-title {
		padding: 0 4%;
		margin: 20rpx auto;

		text {
			font-size: 28rpx;
			color: #212121;
		}
	}

	/* 开通会员 */
	.dredge-vip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 90%;
		height: 80rpx;
		margin: 20rpx auto;
		background-color: #F5F5DC;
		border-radius: 20rpx;
		overflow: hidden;

		.title {
			display: flex;
			align-items: center;
			height: 100%;
			padding: 0 4%;

			text {
				font-size: 26rpx;
				color: #333333;

				.col {
					color: $base;
					font-weight: bold;
				}
			}

			.iconfont {
				font-size: 34rpx;
				color: #333333;
				margin-right: 20rpx;
			}
		}

		.dredge {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 80rpx;
			background-color: #464C5B;

			text {
				font-size: 24rpx;
				color: #F5F5DC;
				text-align: center;
			}
		}
	}

	/* 优惠 */
	.goods-discounts {
		padding: 0 4%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 20rpx auto;

		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			border-bottom: 2rpx solid #f6f6f6;

			.title {
				display: flex;
				align-items: center;
				width: 15%;
				height: 100%;
				font-size: 24rpx;
				color: #212121;
			}

			.content {
				display: flex;
				align-items: center;
				width: 80%;
				height: 100%;

				>text {
					font-size: 24rpx;
					color: #555555;
				}

				.serve {
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					text {
						font-size: 24rpx;
						color: #555555;
					}

					.iconfont {
						font-size: 26rpx;
						color: $base;
						margin-right: 10rpx;
					}
				}

				.coupon-list {
					position: relative;
					display: flex;
					align-items: center;
					// width: 100rpx;
					height: 30rpx;
					border: 2rpx solid $base;
					border-radius: 6rpx;
					margin-right: 20rpx;

					view {
						display: inline-block;
						padding: 0 5rpx;
						color: $base;
						font-size: 24rpx;
						transform: scale(0.8);
					}
				}

				.coupon-list:before {
					position: absolute;
					left: -10rpx;
					top: 50%;
					content: "";
					width: 12rpx;
					height: 12rpx;
					background-color: #fff;
					border-right: 2rpx solid $base;
					border-radius: 100%;
					transform: translate(0, -50%);
				}

				.coupon-list:after {
					position: absolute;
					right: -10rpx;
					top: 50%;
					content: "";
					width: 12rpx;
					height: 12rpx;
					background-color: #fff;
					border-left: 2rpx solid $base;
					border-radius: 100%;
					transform: translate(0, -50%);
				}
			}

			.more {
				display: flex;
				align-items: center;

				text {
					font-size: 24rpx;
					color: #CCCCCC;
				}
			}
		}
	}

	/* 评价 */
	.evaluate-data {
		padding: 0 4%;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;

		.title-more {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100rpx;

			.title {
				display: flex;
				align-items: center;
				height: 100%;

				text {
					font-size: 28rpx;
					color: #212121;
					margin-right: 20rpx;
				}

				.num {
					font-size: 24rpx;
				}
			}

			.more {
				display: flex;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #212121;
				}
			}
		}

		.evaluate-list {
			width: 100%;

			.user-info {
				display: flex;
				align-items: center;
				width: 100%;
				height: 80rpx;

				.thumb {
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 100%;
					}
				}

				.nickname-grade {
					height: 60rpx;
					margin-left: 20rpx;

					.nickname {
						display: flex;
						align-items: center;

						text {
							font-size: 24rpx;
							color: #212121;
						}
					}

					.grade {
						display: flex;
						align-items: center;
						margin-top: 6rpx;

						text {
							font-size: 24rpx;
							color: $base;
						}
					}
				}
			}

			.content {
				width: 100%;

				.character {
					display: flex;
					align-items: center;
					padding: 10rpx 0;

					text {
						font-size: 24rpx;
						color: #333333;
					}
				}

				.attr {
					display: flex;
					align-items: center;
					padding: 10rpx 0;

					text {
						font-size: 24rpx;
						color: #CCCCCC;
					}
				}

				.thumb-list {
					display: flex;
					width: 100%;
					height: 200rpx;
					margin: 10rpx 0;

					.list {
						width: 200rpx;
						height: 200rpx;
						margin-right: 3%;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.look-all {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20rpx auto;

				text {
					padding: 10rpx 20rpx;
					font-size: 26rpx;
					color: #212121;
					border: 2rpx solid #f6f6f6;
					border-radius: 40rpx;
				}
			}
		}
	}

	/* 排行榜 */
	.ranking-list {
		padding: 0 4%;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;

		.ranking-title {
			display: flex;
			align-items: center;
			width: 100%;
			height: 80rpx;

			.title {
				font-size: 26rpx;
				color: #212121;
			}
		}

		.goods-list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			.list {
				width: 32%;
				height: 360rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin-right: 2%;

				.thumb {
					width: 100%;
					height: 200rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title {
					display: flex;
					align-items: center;
					width: 100%;
					height: 80rpx;

					text {
						font-size: 24rpx;
						color: #555555;
					}
				}

				.price {
					display: flex;
					align-items: center;
					width: 100%;
					height: 60rpx;

					text {
						color: $base;
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}

			.list:nth-child(3n) {
				margin-right: 0;
			}
		}
	}

	/* 商品介绍 */
	.products-introduction {
		padding: 0 0 130rpx;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 80rpx;

			text {
				font-size: 28rpx;
				color: #212121;
				margin: 0 20rpx;
			}
		}

		.title:before {
			content: "";
			width: 100rpx;
			height: 2rpx;
			background-color: #c0c0c0;
		}

		.title:after {
			content: "";
			width: 100rpx;
			height: 2rpx;
			background-color: #c0c0c0;
		}

		.content {
			width: 100%;

			image {
				width: 100%;
			}

			img {
				width: 100%;
			}
		}
	}

	/* 底部 */
	.page-footer {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		border-top: 2rpx solid #f6f6f6;
		padding: 0 4% 0 0;

		.footer-fn {
			display: flex;
			align-items: center;
			width: 40%;
			height: 100%;

			.list {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 100%;

				text {
					font-size: 24rpx;
					color: #555555;
				}

				.iconfont {
					font-size: 42rpx;
					color: #212121;
				}
			}
		}

		.footer-buy {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 60%;
			height: 100%;

			.cart-add {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48%;
				height: 90rpx;
				background: linear-gradient(to right, $base, $assist-clor);
				border-radius: 70rpx;

				text {
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}

			.buy-at {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48%;
				height: 90rpx;
				background: $change-clor;
				border-radius: 70rpx;

				text {
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.page-total {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		width: 100%;
		height: 100%;
		// background: rgba(0,0,0,0.3);
		overflow-x: hidden;
		overflow-y: auto;
	}

	/* 属性规格 */
	.cu-dialog {
		width: 100%;
		border-radius: 30rpx 30rpx 0 0 !important;
		overflow: hidden;
		background-color: #FFFFFF;

		// 商品数据
		.goods-data {
			position: relative;
			display: flex;
			align-items: center;
			padding: 0 4%;
			height: 200rpx;

			.thumb {
				display: flex;
				width: 30%;
				height: 160rpx;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}

			.item {
				width: 70%;
				height: 160rpx;

				.title {
					display: flex;
					align-items: center;
					width: 100%;
					height: 60rpx;

					text {
						font-size: 26rpx;
						color: #222222;
					}
				}

				.price {
					display: flex;
					align-items: center;
					width: 100%;
					height: 60rpx;

					text {
						color: $base;
						font-weight: bold;
					}

					.min {
						font-size: 26rpx;
					}

					.max {
						font-size: 34rpx;
					}
				}

				.inventory {
					display: flex;
					align-items: center;
					width: 100%;
					height: 40rpx;

					text {
						font-size: 24rpx;
						color: #C0C0C0;
					}
				}
			}
		}

		// 属性规格
		.attr-size {
			padding: 0 4%;
			height: 80%;
			padding-bottom: 100rpx;
			overflow-y: auto;
			overflow-x: hidden;

			.attr-list {
				width: 100%;

				.title {
					display: flex;
					align-items: center;
					width: 100%;
					height: 80rpx;

					text {
						font-size: 26rpx;
						color: #222222;
					}
				}

				.size-list {
					display: flex;
					flex-wrap: wrap;
					width: 100%;

					.list {
						display: flex;
						padding: 10rpx 30rpx;
						background-color: #EEEEEE;
						border-radius: 100rpx;
						margin-right: 20rpx;
						box-sizing: border-box;
						border: 2rpx solid transparent;

						text {
							font-size: 24rpx;
							color: #222222;
						}
					}

					.action{
						background-color: $rgba-03;
						border: 2rpx solid $base;
						box-sizing: border-box;
						text{
							color: $base;
						}
					}
					.actions{
						background-color: #eee;
						border: 2rpx solid  #eee;
						box-sizing: border-box;
						text{
							color: #ccc;
						}
					}
					.noneActive{
						background-color: #ccc;
						opacity: 0.4;
						color: #000;
						pointer-events: none;
					}
				}
			}

			.attr-number {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 100rpx;

				.tit {
					font-size: 24rpx;
					color: #222222;
				}

				.number {
					display: flex;
					align-items: center;

					text {
						font-size: 26rpx;
						color: #222222;
					}

					input {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 80rpx;
						height: 40rpx;
						font-size: 24rpx;
						color: #222222;
						background-color: #EEEEEE;
						margin: 0 10rpx;
						border-radius: 6rpx;
					}
				}
			}
		}

		.attr-btn {
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 120rpx;
			background-color: #FFFFFF;
			padding: 0 4%;

			.add-cart {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48%;
				height: 90rpx;
				background-color: $base;
				color: #FFFFFF;
				font-size: 28rpx;
				border-radius: 70rpx;
			}

			.add-buy {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48%;
				height: 90rpx;
				background-color: $uni-color-warning;
				color: #FFFFFF;
				font-size: 28rpx;
				border-radius: 70rpx;
			}

			.confirm {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 90rpx;
				background-color: $base;
				color: #FFFFFF;
				font-size: 28rpx;
				border-radius: 70rpx;
			}
		}
	}
</style>